<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>gen-ellipsis-text</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>原文</p>
    <div style="border: 2px dotted #66ccff;">
        nodejs这个服务器端JavaScript框架出现后，很多人质疑其效率是否比较低。这也很正常，因为javascript本来就是是用C编写的前端脚本语言，本身依赖解释器运行，运行效率当然没有编译运行的C高?
    </div>
    <div style="border: 2px dotted #66ccff; margin-top: 10px;">
        Any seemingly pointless activity which is actually necessary to solve a problem which solves a problem which, several levels of recursion later, solves the real problem you're working on
    </div>

    <p class="desc">通过 css 样式 <b>one-line-ellipsis</b> 实现</p>
    <div class="box one-line-ellipsis" id="box1">
        nodejs这个服务器端JavaScript框架出现后，很多人质疑其效率是否比较低。这也很正常，因为javascript本来就是是用C编写的前端脚本语言，本身依赖解释器运行，运行效率当然没有编译运行的C高?
    </div>
    <div class="box one-line-ellipsis" id="box2">
        Any seemingly pointless activity which is actually necessary to solve a problem which solves a problem which, several levels of recursion later, solves the real problem you're working on
    </div>

    <p class="desc">通过 css 样式 <b>multi-line-ellipsis-webkit</b> 实现，此实现只支持webkit内核的浏览器（如移动端和chrome）</p>
    <div class="box multi-line-ellipsis-webkit" id="box3">
        nodejs这个服务器端JavaScript框架出现后，很多人质疑其效率是否比较低。这也很正常，因为javascript本来就是是用C编写的前端脚本语言，本身依赖解释器运行，运行效率当然没有编译运行的C高?
    </div>
    <div class="box multi-line-ellipsis-webkit" id="box4">
        Any seemingly pointless activity which is actually necessary to solve a problem which solves a problem which, several levels of recursion later, solves the real problem you're working on
    </div>

    <p class="desc">通过 css 样式 <b>multi-line-ellipsis</b> 实现,此实现跨浏览器</p>
    <div class="box multi-line-ellipsis" id="box5">
        nodejs这个服务器端JavaScript框架出现后，很多人质疑其效率是否比较低。这也很正常，因为javascript本来就是是用C编写的前端脚本语言，本身依赖解释器运行，运行效率当然没有编译运行的C高?
    </div>
    <div class="box multi-line-ellipsis" id="box6">
        Any seemingly pointless activity which is actually necessary to solve a problem which solves a problem which, several levels of recursion later, solves the real problem you're working on
    </div>

    <p class="desc">通过 js 实现</p>
    <div class="box" id="box7">
        nodejs这个服务器端JavaScript框架出现后，很多人质疑其效率是否比较低。这也很正常，因为javascript本来就是是用C编写的前端脚本语言，本身依赖解释器运行，运行效率当然没有编译运行的C高?
    </div>
    <p>英文内容需要添加上 word-break: break-all; </p>
    <div class="box" id="box8" style="word-break: break-all;">
        Any seemingly pointless activity which is actually necessary to solve a problem which solves a problem which, several levels of recursion later, solves the real problem you're working on
    </div>
    <script src="index.js"></script>
</body>
</html>